/**
 * 由 WangYu 创建
 * 日期 2017/9/5
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ToastAndroid, TextInput, TouchableOpacity, StatusBar, ScrollView, Dimensions
    , Platform, BackHandler, TouchableNativeFeedback, DeviceEventEmitter
} from 'react-native';
import {connect} from 'react-redux';
import {defaultStatusBarColor} from "../../config/Config";
import MenuList from "./MenuList";
import HomeMiddleView from "./HomeMiddleView";
import HomeMiddleView2 from "./HomeMiddleView2";
import HomeShopCenterView from "./HomeShopCenterView";
import GuessYourLikeView from "./GuessYourLikeView";
import {Actions} from "react-native-router-flux";
const HomeTopMenuData = require("../../data/HomeTopMenu.json");
const HomeMiddleData = require("../../data/HomeCenterMenu.json");
const HomeMiddleData2 = require("../../data/HomeCenter1Menu.json");
const ShopCenterData = require("../../data/HomeShopCenter.json");
const {width} = Dimensions.get('window');
class HomePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            indicatorIndex: 0,
        }
    }


    componentDidMount() {
        StatusBar.setTranslucent(false);
        StatusBar.setBackgroundColor(defaultStatusBarColor, true);
    }

    render() {
        return (
            <View style={styles.container}>
                {/*首页搜索栏*/}
                {this.renderTitleBar()}
                <ScrollView style={styles.container}>
                    {/*顶部menu*/}
                    {this.renderTopView()}
                    {/*中间分块的view*/}
                    <View style={{height: 15}}/>
                    {this.renderMiddleView()}
                    {/*中间下部分的view*/}
                    <View style={{height: 15}}/>
                    {this.renderMiddleView2()}
                    {/*购物中心*/}
                    <View style={{height: 15}}/>
                    {this.renderShopCenterView()}
                    {/*猜你喜欢*/}
                    <View style={{height: 15}}/>
                    {this.renderGuessYourLikeView()}
                </ScrollView>
            </View>
        );
    }

    /**
     * 头部搜索栏
     */
    renderTitleBar() {
        return (
            <View style={styles.title}>
                <Text style={{color: 'white', fontSize: 18}}>北京</Text>
                <TextInput
                    style={styles.textInput}
                    onChangeText={(text) => {
                        this.setState({content: text, isShow: text != ''})
                    }}
                    underlineColorAndroid='transparent'
                    placeholder={'输入商家,品类,商圈'}
                    returnKeyType={'search'}
                    keyboardType={'default'}
                    secureTextEntry={false}
                    onSubmitEditing={() => ToastAndroid.show('提交', ToastAndroid.SHORT)}
                />
                <TouchableNativeFeedback onPress={() => Actions.Test()}>
                    <Image source={{uri: 'icon_homepage_message'}} style={styles.titleIcon}/>
                </TouchableNativeFeedback>
                <Image source={{uri: 'icon_homepage_scan'}} style={[styles.titleIcon]}/>
            </View>
        );
    }

    /**
     * 搜索栏下面的view
     * @returns {XML}
     */
    renderTopView() {
        //munuArr就是一个数组  他里面包含了两个数组  是munu的两页
        let menuArr = HomeTopMenuData.data;
        let viewArr = [];
        let indicatorArr = [];
        //遍历添加list和指示器
        for (var i = 0; i < menuArr.length; i++) {
            viewArr.push(
                <MenuList flatListData={menuArr[i]} key={i} navigation={this.props.navigation}/>
            );
            indicatorArr.push(
                <Text key={i}
                      style={{
                          marginLeft: 2,
                          marginRight: 2,
                          fontSize: 25,
                          color: this.state.indicatorIndex === i ? 'orange' : 'gray'
                      }}>&bull;</Text>
            )
        }
        return (
            <View style={{height: 160}}>
                <ScrollView horizontal={true} style={{height: 140}}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            onMomentumScrollEnd={(e) => {
                                this.setState({indicatorIndex: Math.floor(e.nativeEvent.contentOffset.x / width)})
                            }}>
                    {viewArr}
                </ScrollView>
                <View style={styles.indicatorLayoutStyle}>
                    {indicatorArr}
                </View>
            </View>
        );
    }

    /**
     * 中间的布局
     */
    renderMiddleView() {
        return (
            <HomeMiddleView data={HomeMiddleData}/>
        );
    }

    /**
     * 中间偏下的布局
     */
    renderMiddleView2() {
        return (
            <HomeMiddleView2 data={HomeMiddleData2.data} navigation={this.props.navigation}/>
        );
    }

    renderShopCenterView() {
        return (
            <HomeShopCenterView data={ShopCenterData} navigation={this.props.navigation}/>
        );
    }

    renderGuessYourLikeView() {
        return (
            <GuessYourLikeView/>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8'
    },
    title: {
        backgroundColor: '#fd5700',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        justifyContent: 'space-around'
    },
    textInput: {
        height: 28,
        width: 250,
        backgroundColor: 'white',
        padding: 0,
        borderRadius: 100,
        paddingLeft: 10
    },
    titleIcon: {
        width: 25,
        height: 25,
    },
    topItemStyle: {},
    wrapper: {
        height: 120,
    },
    indicatorLayoutStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        height: 20
    },
});
export default HomePage;
